Uploading to FlashAir

Last update: July 2013

In this tutorial, we will show you how to upload a file from a client device to your FlashAir via wireless connection by using CGI command.

Overview

We can use upload.cgi to upload a file to a FlashAir card via wireless connection.
In this tutorial, we will show how to upload a file to a FlashAir card. We will add an uploading routine to the program we created in Web Tutorial 3: Getting Contents List 22.

Preparation

First, let us repeat uploading procedure again.

1. Set UPLOAD=1 to CONFIG file.
2. Reboot the FlashAir.
3. Connect to the FlashAir via wireless network.
4. Send WRITEPROTECT command to enable write protection against a host device.
5. Send UPDIR command to set a destination directory of the file to be uploaded.
6. Send FTIME command to set a date and time of the file uploaded to be uploaded.
7. Upload the file to the card by sending POST request to upload.cgi.

We assume you have done by step 3 to go to next section.

Creating Screen Layout

First we will create a HTML file which will be a main screen of the Browser Utility. We will add a text box and a button to choose a file to be uploaded and a button to senda a uploading request.

/SD_WLAN/List.htm

upload<br>
<input type="file" id='file' name='file'><br>
<button id="cmdUpload">Upload</button>

Uploading File to FlashAir

To upload a file to a FlashAir, you have to send POST request to the upload.cgi with a file content and its name as a multi-part form data format.
In this tutorial, we will use the FormData class defined in the XMLHttpRequest Level 2 (XHR2) to build a multi-part form data.

Before sending the upload request, you have to do following configurations: write protection, destination directory, and date and time. We will use the current directory as a destination directory and the current date and time as those of the file to be uploaded.

V1: Firmware 1.00s does not allow a long file name. The firmware will shorten a long file name if it is received a file which has a long file name.

The program will refresh its contents after uploading to show the file has to be uploaded correctly.

Let's start making the program.
First we will add a function to main.js which uploads a file.

/SD_WLAN/js/main.js

//UploadProcess
function doUpload() {
    var path = makePath(".");
    var cgi = "/upload.cgi";
    var timestring;
    var dt = new Date();
    var year = (dt.getFullYear() - 1980) << 9;
    var month = (dt.getMonth() + 1) << 5;
    var date = dt.getDate();
    var hours = dt.getHours() << 11;
    var minites = dt.getMinutes() << 5;
    var seconds = Math.floor(dt.getSeconds() / 2);
    timestring = "0x" + (year + month + date).toString(16) + (hours + minites + seconds).toString(16);  
    $.get(cgi + "?WRITEPROTECT=ON&UPDIR=" + path + "&FTIME=" + timestring, function() {
        var uploadFile = $('#file')[0].files[0];
        var fd = new FormData();
        fd.append("file", uploadFile);
        $.ajax({ url: cgi,
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            success: function(html){
                if ( html.indexOf("SUCCESS") ) {
                    alert("success");
                    getFileList(".");
                }else{
                    alert("error");
                }
            }
        });     
    }); 
    return false;
}

• Lines 6-13:
  We build a date and time of a file to be uploaded.
  We will make a date and a time as 16-bit hexadecimal values respectively, and concatinate them to use a parameter of the request. Please refer to the API Guide / upload.cgi for further information.
• Line 14:
  We send a command to configure write protection, the destination directory, and the date and time as a single CGI request.
  Sending a file content will be done in the callback function of this request to secure these parameters would be set correctly.
• Lines 15-17:
  We build a multi-part form data contains a file content. We pick up the file name from the text box for file selection and set it to FormData.
• Lines 18-31:
  This method send a file content as a POST request. We need to set processData (line 21) to false to prevent the method expanding the content of the FormData as query parameters. We also set contentType (line 22) to false. It allows that the method determine the type of the content automatically. Please refer to the jQuery document for further information.
• Lines 23-30:
  After sending the file content finished successfully, the callback function will be called to reload the content list.

Next we register a click event handler in Document Ready method. The method will start sending if the button is clicked.

/SD_WLAN/js/main.js

$("#cmdUpload").click(function(e) {
    doUpload();
    return false;
});

Result

Save the program to your FlashAir card. After that, open the Browser Utility created in this tutorial with a web browser on your PC or smartphone connected to the FlashAir.
You can see a screen like below:

Sample Code

advanced_tutorial_02.zip (4KB)

All sample code on this page is licensed under BSD 2-Clause License